<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>1.事件处理方法 v-on或@</h3>
        <button v-on:click="say">Say {{msg}}</button>
        <!-- $event代表原生dom事件作为参数传输 -->
        <button v-on:click="say1('hello',$event)">Say {{msg}}</button>
        <h3>2.防止单击事件继续传播</h3>
        <!-- 2.1防止单击事件的继续传播 -->
        <div @click="todo" style="margin-bottom: 10px;">
            <button @click="doThis" >单击事件继续传播</button>
        </div>
        <!-- @click.stop阻止单击事件的继续传播 -->
        <div @click="todo">
            <button @click.stop="doThis" >阻止单击事件继续传播</button>
        </div>
        <!-- 2.2防止事件默认行为 -->
        <a href="https://www.baidu.com/" @click.prevent="toblog">百度</a>
        <!-- 2.3事件触发一次 -->
        <button @click.once="add">点击按钮+1：{{num}}</button>
        <h3>3.按键修饰符</h3>
        <input type="text" @keyup.enter="keyEnter"> <br>
        <input type="text" @keyup.space="keySpace">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"整日都很无聊的阿呆想睡觉",
                num:0,
            },
            methods: { //定义事件处理函数
                say:function(event){
                    //event代表原生dom事件,Vue.js会将它自动传入进行来
                    alert(this.msg);
                    alert(event.target.innerHTML);
                },
                say1:function(name,event){
                    alert(name);
                    //如果有多个参数，而需要使用原始事件时，则需要用$event作为参数传入
                    alert(name+","+event.target.tagName);
                },
                doThis:function(){
                    alert("doThis...");
                },
                todo:function(){
                    alert("todo...");
                },
                toblog:function(){
                    alert("39.108.152.192/blog/list");
                },
                add:function(){
                    this.num++;
                },
                keyEnter:function(){
                    alert("enter");
                },
                keySpace:function(){
                    alert("space");
                }
            },
        })
    </script>
</body>
</html>